<template>
  <div class="page">
    <el-row :gutter="24" type="flex" justify="flex-start">
      <el-col span="8" v-if="showSupplier">
        <div class="label">
          <span class="label-span">供应商编码:</span>
          <el-input disabled size="mini" v-model="supplierInfo.supplierNo" placeholder="供应商编码" maxlength="30"></el-input>
        </div>
      </el-col>
      <el-col span="8" v-if="showSupplier">
        <div class="label">
          <span class="label-span">供应商名称:</span>
          <el-input disabled size="mini" v-model="supplierInfo.supplierNameZh" placeholder="供应商名称"></el-input>
        </div>
      </el-col>
      <el-col span="8">
        <div class="label">
          <span class="label-span">{{ selfLabelText }}:</span>
          <el-cascader style="width: 100%;" size="mini" v-model="form.purchaseType" :props="purchaseTypeProps" :options="purchaseTypeList" @change="purchaseTypeChange" :placeholder="selfLabelText"></el-cascader>
        </div>
      </el-col>
    </el-row>
    <avue-crud :option="option" :data="data">
      <template slot="menuLeft">
        <span>未选</span>
      </template>
      <template slot-scope="{ row }" slot="menu">
        <el-tooltip content="添加" style="height:auto" class="rightbtn" effect="dark" placement="bottom" v-if="!row.addHide">
          <div class="top-bar__item">
            <el-button type="text" size="mini" icon="el-icon-plus" @click.stop="rowAdd(row)"></el-button>
          </div>
        </el-tooltip>
      </template>
    </avue-crud>
    <avue-crud :option="option1" :data="data1">
      <template slot="menuLeft">
        <span>已选</span>
      </template>
      <template slot-scope="{ row }" slot="menu">
        <el-tooltip content="删除" style="height:auto" class="rightbtn" effect="dark" placement="bottom">
          <div class="top-bar__item">
            <el-button type="text" size="mini" icon="el-icon-minus" @click.stop="rowDel(row)"></el-button>
          </div>
        </el-tooltip>
      </template>
    </avue-crud>
  </div>
</template>

<script>
import { getTree, getMaterialGroup } from "@/api/project/productData/baseData"; // 采购类型  物料组
import { option, option1 } from "./util";
export default {
  name: "",
  // props: ['showSupplier','selfMaterialFlagAndType','selfLabelText','materialGroupData','supplierInfo','detailData'],
  props: {
    readonly:{type: Boolean, default: false},
    showSupplier: { type: Boolean, default: false },
    selfLabelText: { type: String, default: "采购类型" },
    supplierInfo: {
      type: Object,
      default: () => {
        return { supplierNo: "", supplierNameZh: "" };
      }
    },
    selfMaterialFlagAndType: {
      type: Array,
      default: () => ["M", "MR"]
    },
    detailData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      data: [],
      // data1: [],
      form: { purchaseType: ["M", "MR"] },
      purchaseTypeList: [],
      purchaseTypeProps: {
        children: "children",
        label: "dictValue",
        value: "dictKey"
      },
      option: option,
      option1: option1
    };
  },
  computed:{
    data1(){
      return this.detailData
    }
  },
  created() {
    if (this.selfMaterialFlagAndType) {
      this.form.purchaseType = [...this.selfMaterialFlagAndType];
    }
    this.option.menu = !this.readonly
    this.option1.menu = !this.readonly
    // if (this.detailData.length > 0) {
      // console.log(this.detailData)
      // this.data1 = this.detailData;
      // this.$set(this, 'data', this.detailData)
    // }
    this.getTree();
    this.getMaterialGroup();
  },
  methods: {
    purchaseTypeChange() {
      this.getMaterialGroup();
    },
    async getTree() {
      const { data } = await getTree("materials");
      this.purchaseTypeList = data.data;
      let dicData = [];
      this.purchaseTypeList.forEach(item => {
        dicData.push(...item.children);
      });
      this.option.column[0].dicData = this.purchaseTypeList;
      this.option.column[1].dicData = dicData;

      this.option1.column[0].dicData = this.purchaseTypeList;
      this.option1.column[1].dicData = dicData;
    },
    async getMaterialGroup() {
      const { data } = await getMaterialGroup(this.form.purchaseType[1]);
      if (this.data1.length) {
        const arr = this.data1.map(i => i.materialGroupNo);
        //判断下表格中是否含有查到的数据  隐藏 +号
        data.data.forEach(item => {
          item.addHide = arr.includes(item.materialGroupNo);
        });
      }
      this.data = data.data;
    },
    rowAdd(row) {
      this.data1.push(row);
      // this.data[row.$index].addHide = true
      this.$set(this.data[row.$index], "addHide", true);
      this.$emit("selection", this.data1);
    },
    rowDel(row) {
      this.data1.splice(
        this.data1.findIndex(i => i.materialGroupNo === row.materialGroupNo),
        1
      );
      const num = this.data.findIndex(
        i => i.materialGroupNo === row.materialGroupNo
      );
      if (num > -1) {
        this.$set(this.data[num], "addHide", false);
      }
      this.$emit("selection", this.data1);
    }
  }
};
</script>

<style scoped>
.label {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.label-span {
  width: 120px;
  padding-right: 5px;
  text-align: right;
}
</style>
